<template>
    <div>
        <div class="head_img hidden-md hidden-sm hidden-xs"></div>
        <img class="head_phone_img hidden-lg" src="../../assets/hghotel_image/banner05.jpg" alt="">
        <div class="container-fluid">
            <div class="kffw hidden-xs" >
                <span class="kffw_left"></span> 找到我们 <span class="kffw_right"></span>
            </div>
            <div class="row  hidden-sm hidden-md hidden-lg" style="font-size:16px;margin-top:20px;line-height:20px;text-align:center;padding:0 10px;margin-bottom: 20px;">
                <div class="col-xs-4 kffw_left"></div >
                <div class="col-xs-4 no_pad" style="font-weight:bold;font-size:18px">找到我们</div >
                <div class="col-xs-4 kffw_right"></div>
            </div>
            <div class="row" style="height:360px;width:100%">
                <div class="col-sm-6 col-xs-12 no_pad address hidden-xs">
                    <div class="phone">
                        <img src="../../assets/kffw_img/phone.png" width=32 height=31 style="margin-top:-5px" alt="">
                        <p>订房电话:</p>
                        <p class="phone_num"><span>86-532-82652888</span></p>
                    </div>
                    <div class="details">
                        <div>
                            <img src="../../assets/kffw_img/youbian.png" alt="">
                            <p>邮政编码：&nbsp&nbsp266002</p>
                        </div>
                        <div>
                            <img src="../../assets/kffw_img/dianhua.png" alt="">
                            <p>预餐电话：&nbsp&nbsp86-532-82660266</p>
                        </div>
                        <div>
                            <img src="../../assets/kffw_img/address.png" alt="">
                            <p>青岛惠国宾馆地址：&nbsp&nbsp山东省青岛市巫峡路29号</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-xs-12 no_pad">
                <my-map></my-map>
                </div>
                <div class="col-xs-12 no_pad advan pad hidden-sm hidden-md hidden-lg" style="margin-top:20px">
                    <p style="color:#8f4290;font-size:16px;font-weight:bold">联系我们&nbsp&nbsp:</p>
                    <p>订房电话：&nbsp&nbsp86-532-82652888</p>
                    <p>邮政编码：&nbsp&nbsp266002</p>
                    <p>预餐电话：&nbsp&nbsp86-532-82660266</p>
                    <p>青岛惠国宾馆地址：&nbsp&nbsp山东省青岛市巫峡路29号</p>
                </div>
            </div>
            <div class="row">   
                <div class="col-xs-12 no_pad advan pad">
                    <p style="color:#8f4290;font-size:16px;font-weight:bold">区位优势&nbsp&nbsp:</p>
                    <p>步行2分钟——到达海上旅游码头，亲触碧浪，乘海出航</p>
                    <p>步行3分钟——到达八大峡花园广场，静赏绿意花香</p>
                    <p>步行15分钟——到达青岛火车站和青岛标志性景点栈桥，舒览长虹远引、长龙卧海的栈桥秀美风光</p>
                    <p>车行5分钟——到达天主教堂，领略历史绵远风格不同的2国建筑的欧韵文化</p>
                    <p>到达中山路特色商业街，畅享特色繁华的购物之乐，品尝劈柴院小吃街最古老的青岛特色美食</p>
                    <p>车行2分钟——到达青岛胶州湾海底隧道的出入口，领略青黄一线的海岛风光</p>
                </div>
            </div>
            <div class="kffw hidden-xs" >
                <span class="kffw_left"></span> 旅游路线 <span class="kffw_right"></span>
            </div>
            <div class="row  hidden-sm hidden-md hidden-lg" style="font-size:16px;margin-top:20px;line-height:20px;text-align:center;padding:0 10px;margin-bottom: 20px;">
                <div class="col-xs-4 kffw_left"></div >
                <div class="col-xs-4 no_pad" style="font-weight:bold;font-size:18px">旅游路线</div >
                <div class="col-xs-4 kffw_right"></div>
            </div>
            <div class="row">   
                <div class="col-xs-12 no_pad advan pad" style="margin-top:0">
                    <p style="color:#8f4290;font-size:16px;font-weight:bold">旅行社简介&nbsp&nbsp:</p>
                    <p>青岛惠国旅行社有专业从事旅游组团接待、大型会议策划及组织实施，拥有一批多年从事旅游行业的专业管理人员和优秀导游队伍，拥有安全可靠的旅游车队和票务中心，具有较强的组团和接待能力。</p>
                    <p>青岛惠国旅行社遵循“诚信、团结、创新、唯美”的理念。全体员工齐心协力，努力把青岛惠国旅行社办成一个岛城的名牌企业，创立旅游界的卓越品牌。多年来努力探讨形成了从会议策划接待及旅游服务于一体的运作格局，
                        以“开拓、进取、诚信”的精神、专业的策划推广、严格的运作管理、优质的服务，逐步获业界及社会各界的认可。</p>
                    <p>公司备有适合团队和散客的全国各地经典旅游路线，承接专业的会议和商务考察，以及为都市白领准备的野外拓展交友活动，青岛惠国旅行社有限公司全体员工恭候你的垂询。</p>
                    <p>总经理：乔巍 0532—88002177</p>
                    <p>业务总监：程芸 66671701</p>
                    <p>计&nbsp调：李成林 0532-66671702 咨询电话：15966807046</p>
                    <p>地&nbsp址：青岛市南区巫峡路29号惠国宾馆一楼</p>
                    <p>传&nbsp真：0532—82652188</p>
                </div>
                <div class="col-md-12 col-lg-12 no_pad" style="text-align:left;margin-top:34px;">
                    <div class="col-sm-6 col-md-6 col-lg-6 no_pad">
                        <img src="../../assets/kffw_img/jingdian.png" alt="" class="hidden-sm hidden-md hidden-xs">
                        <img src="../../assets/kffw_img/jingdian.png" width=100% alt="" class="hidden-lg">
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-6 no_pad advan pad  mtop">
                        <p style="color:#8f4290;font-size:16px;font-weight:bold">热门路线&nbsp&nbsp:</p>
                        <p>• 青岛崂山风景一日游</p>
                        <p>• 青岛市内纯玩无购物休闲一日游</p>
                        <p>• 青岛市内崂山风一晚二日游</p>
                        <p>• 烟台威海蓬莱纯玩一晚二天游</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import myMap from '../component/map'
export default {
    components: {
        'my-map': myMap
    }
}
</script>
<style scoped>
    .head_img{
            width:100%;
            height: 410px;
            background:url('../../assets/hghotel_image/banner05.jpg') no-repeat center;
            background-size: cover;
        }
    .head_phone_img{
        width:100%;
    }
    p {
        margin: 0;
        text-align: left;
    }
    .kffw{
        width: 100%;
        height: 125px;
        line-height: 125px;
        margin:0 auto;
        font-size: 20px;
        font-weight:bolder;
    }
    .no_pad {
        padding: 0;
    }
    .row {
        margin: 0;
    }
    
    @media (min-width:1200px) {
        .container-fluid {
            margin-right: auto;
            margin-left: auto;
            padding: 0;
            width: 1200px;
        }
        .phone {
            text-align: left;
            margin: 80px 0 0 60px;
            line-height: 36px;
        }
        .advan {
            margin-top: 20px;
            line-height: 34px;
        }
    }
     @media (min-width:768px) {
        /*客房服务横线样式*/
        .kffw_left,
        .kffw_right{
            width:195px;
            height:1px;
            background: #8f4290;
            display:inline-block;
            margin-bottom: 6px;
            margin-right: 15px;
        }
        .kffw_right{
            margin-left: 15px;
        }

        .address {
            height: 100%;
            background:#8f4290;
        }
        .phone {
            text-align: left;
            margin: 60px 0 0 40px;
            line-height: 36px;
        }
        .phone p {
            color: #fff;
            font-size: 24px;
            display: inline-block;
            margin: 0;
            margin-left: 10px;
        }
        .phone .phone_num {
            display: block;
            margin-left: 48px;
        }
        .phone .phone_num span {
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #fff;
            display: inline-block;
        }
        .details {
            margin-left: 46px;
            text-align: left;
            line-height: 34px;
            margin-top: 30px;
        }
        .details p {
            display: inline-block;
            margin: 0;
            color: #fff;
            margin-left: 10px;
        }
    }
    @media (max-width:768px) { 
        .kffw_left,
        .kffw_right{
            height:1px;
            background: #8f4290;
            margin-top: 9px;
        }
        /*手机小屏幕时路线推荐*/
        .mtop {
            margin-top: 17px;
            padding: 0 20px;
        }
    }
    @media (max-width:1200px) { 
        .pad {
            padding: 0 20px;
        }
        .advan {
            margin-top: 20px;
            line-height: 26px;
        }
    }

</style>